<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>批量上传</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="u-cursor" @click="$router.back()">计划管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ pageTitle }}计划</el-breadcrumb-item>
    </el-breadcrumb>
    <Container class="u-pb60">
      <el-form
        class="m-form--detail"
        label-width="160px"
        :model="pageData"
        :rules="pageRules"
        ref="pageForm"
      >
        <ContainerTitle>请选择投放账号</ContainerTitle>
        <el-form-item prop="mainAccount" size="small" label="投放产品">
          <el-select
            class="u-w350"
            placeholder="请选择投放产品"
            filterable
            v-model="pageData.mainAccount"
            @change="handleChangeMainAccount"
          >
            <el-option
              v-for="(item, index) in mainAccountOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="subAccount" size="small" label="广告主ID：">
          <!--  -->
          <!-- <el-select
            class="u-w350"
            placeholder="请选择快手子账户"
            filterable
            v-model="pageData.subAccount"
            :disabled="pageData.mainAccount==''"
            @change="handleChangesubAccount"
          >
            <el-option
              v-for="item in subAccountOptions"
              :key="item.accountId"
              :label="item.accountName"
              :value="item.accountId"
            ></el-option>
          </el-select>-->
          <!-- <el-select
            class="u-w350"
            placeholder="请选择广告主ID"
            filterable
            multiple
            v-model="pageData.subAccount"
            :disabled="pageData.mainAccount == ''"
            @change="handleChangesubAccount"
          >
            <el-option
              v-for="item in subAccountOptions"
              :key="item.accountId"
              :label="`${item.accountName}(${item.accountId})`"
              :value="item.accountId"
            ></el-option>
          </el-select> -->
          <el-cascader
            class="u-w350"
            placeholder="请选择广告主ID"
            v-model="pageData.subAccount"
            :props="subOptionProps"
            :options="subAccountOptions"
            @change="handleChangesubAccount"
            filterable
            clearable
          ></el-cascader>
        </el-form-item>
        <ContainerTitle>广告计划</ContainerTitle>
        <!-- <el-form-item prop="advName" size="small" label="广告计划名称：">
          <el-input
            class="u-w350"
            placeholder="请输入广告计划名称"
            v-model="pageData.advName"
            rows="5"
            maxlength="200"
          ></el-input>
        </el-form-item> -->
        <el-form-item size="small" label="营销目标：">
          <!-- 提升应用安装{{pageData.market}} -->
          <el-select
            class="u-w350"
            placeholder="请选择定向模版文件名"
            filterable
            v-model="pageData.market"
            @change="handleChangeMarket"
          >
            <el-option
              v-for="item in MAEKETOPTIONS"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="单日预算：">
          不限
          <!-- {{pageData.budget}} -->
        </el-form-item>
        <ContainerTitle>设置层级名称</ContainerTitle>
        <el-form-item label="设置方式">
          <el-radio-group v-model="pageData.settingType">
            <el-radio-button :label="1">统一设置</el-radio-button>
            <el-radio-button :label="2">分账户设置</el-radio-button>
            <el-radio-button :label="3">分广告组设置</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div v-if="pageData.settingType == 1">
          <el-form-item prop="advName" size="small" label="广告计划名称">
            <el-input
              class="u-w350"
              placeholder="请输入广告计划名称"
              v-model="pageData.advName"
              rows="5"
              maxlength="200"
            ></el-input>
          </el-form-item>
          <el-form-item prop="advGroupName" size="small" label="广告组名称">
            <el-input
              maxlength="200"
              class="u-w350"
              placeholder="请输入广告组名称"
              v-model="pageData.advGroupName"
            ></el-input>
          </el-form-item>
          <el-form-item size="small" label="广告组创意">
            <div class="text-info bg-purple-light u-mb10" style="width: 340px">
              广告创意名称为系统自动生成<br />
              生成规则：当日日期-10位自增数<br />
              例如：20201009-0000000001
            </div>
          </el-form-item>
        </div>
        <div v-if="pageData.settingType == 2">
          <el-form-item>
            <div
              class="text-info bg-purple-light u-mb10"
              style="width: 340px; line-height: 22px"
            >
              1、已选账户单独设置名称。请先选择投放账户<br />
              2、广告创意名称为系统自动生成<br />
              生成规则：当日日期 - 10位自增数<br />
              例如：20201009-0000000001
            </div>
          </el-form-item>
        </div>
        <div v-if="pageData.settingType == 2">
          <div
            v-for="(item, index) in pageData.groupNameList"
            :key="'info1' + -index"
          >
            <el-form-item
              :label="item.accountName"
              :prop="'groupNameList.' + index + '.advName'"
              :rules="pageRules.advName"
            >
              <el-input
                maxlength="200"
                class="u-w350"
                placeholder="请输入广告计划名称"
                v-model="item.advName"
              ></el-input>
            </el-form-item>
            <el-form-item
              :prop="'groupNameList.' + index + '.advGroupName'"
              :rules="pageRules.advGroupName"
            >
              <el-input
                maxlength="200"
                class="u-w350"
                placeholder="请输入广告组名称"
                v-model="item.advGroupName"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div v-if="pageData.settingType == 3">
          <el-form-item>
            <div
              class="text-info bg-purple-light u-mb10"
              style="width: 340px; line-height: 22px"
            >
              1、广告组名称取：快手应用管理-应用标记<br />
              2、未避免名称重复，广告计划命名规则:手动输入名称+5位随机数<br />
              3、广告创意名称为系统自动生成<br />
              生成规则：当日日期-10位自增数<br />
              例如：20201009-0000000001
            </div>
          </el-form-item>
        </div>
        <div v-if="pageData.settingType == 3">
          <div
            v-for="(item, index) in pageData.groupNameList"
            :key="'info1' + -index"
          >
            <el-form-item
              :label="item.accountName"
              :prop="'groupNameList.' + index + '.advName'"
              :rules="pageRules.advName"
            >
              <el-input
                maxlength="200"
                class="u-w350"
                placeholder="请输入广告计划名称"
                v-model="item.advName"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <!--  <ContainerTitle>广告组</ContainerTitle>
        <el-form-item size="small" label="广告组名称："
          >此字段为单独配置，请先选择投放账户</el-form-item
        >
        <div
          v-for="(item, index) in pageData.groupNameList"
          :key="'info1' + -index"
        >
          <el-form-item
            :label="item.accountName"
            :prop="'groupNameList.' + index + '.advGroupName'"
            :rules="pageRules.advGroupName"
          >
            <el-input
              maxlength="50"
              class="u-w350"
              placeholder="请输入广告组名称"
              v-model="item.advGroupName"
            ></el-input>
          </el-form-item>
        </div> -->
        <ContainerTitle>投放范围</ContainerTitle>
        <el-form-item label="投放范围">
          <el-radio-group v-model="pageData.unionAdvert" @change="changeUnion">
            <el-radio-button :label="0">默认</el-radio-button>
            <el-radio-button :label="1">快手广告联盟</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div v-if="pageData.market == 2">
          <ContainerTitle>投放目标</ContainerTitle>
          <el-form-item>
            <div
              class="text-info bg-purple-light u-mb10"
              style="width: 340px; line-height: 22px"
            >
              1、此字段为分账户配置，请先选择投放账户<br />
              2、与营销目标有关联，请再选择营销目标
            </div>
          </el-form-item>
          <el-form-item label="设置方式">
            <el-radio-group v-model="pageData.targetType">
              <el-radio-button :label="0">按账户</el-radio-button>
              <el-radio-button :label="1">按广告组</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <div
            v-for="(item, index) in pageData.groupNameList"
            :key="'info2-' + index"
          >
            <div class="u-mt15">{{ item.accountName }}</div>
            <el-form-item class="u-mt15" label="选择应用">
              <el-select
                placeholder="请选择"
                class="u-w350"
                v-model="item.chooseApplication"
                v-if="pageData.targetType == 0"
                filterable
              >
                <el-option
                  v-for="(items, indexs) in item.chooseAppeOptions"
                  :key="indexs"
                  :label="`${items.name},${items.tag},${items.os}`"
                  :value="items.id"
                ></el-option>
              </el-select>
              <el-select
                placeholder="请选择"
                class="u-w350"
                v-model="item.ourId"
                v-else
                filterable
                allow-create
                default-first-option
                multiple
              >
                <el-option
                  v-for="(items, indexs) in item.chooseAppeOptions2"
                  :key="indexs"
                  :label="`${items.appName},${items.appVersion},${items.appPlatform}`"
                  :value="items.id"
                ></el-option>
              </el-select>
              <div class="u-mt15">
                <div>
                  <el-checkbox v-model="item.isFirst" @change="selectFirst"
                    >优先从系统应用商店下载</el-checkbox
                  >
                </div>
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  @change="selectCheckAll"
                  v-if="item.isFirst != ''"
                  v-model="item.checkAll"
                  >全选</el-checkbox
                >
                <el-checkbox-group
                  v-model="item.phoneType"
                  @change="checkedChange"
                  v-if="item.isFirst != ''"
                  style="display: inline"
                >
                  <el-checkbox label="huawei">华为</el-checkbox>
                  <el-checkbox label="oppo">OPPO</el-checkbox>
                  <el-checkbox label="vivo">VIVO</el-checkbox>
                  <el-checkbox label="xiaomi">小米</el-checkbox>
                  <el-checkbox label="meizu">魅族</el-checkbox>
                  <el-checkbox label="smartisan">锤子</el-checkbox>
                </el-checkbox-group>
              </div>
              <el-input
                class="u-w350 u-mt15"
                placeholder="请输入点击监测链接"
                v-model="item.clickUrl"
                v-if="pageData.targetType == 0"
              ></el-input>
              <div class="u-mt15">
                <el-input
                  class="u-w350 u-mt15"
                  placeholder="请输入第三方ActionBar点击监控链接"
                  v-model="item.actionbarClickUrl"
                  v-if="pageData.targetType == 0"
                ></el-input>
              </div>
            </el-form-item>
          </div>
        </div>
        <div v-if="pageData.market == 5">
          <el-form-item label="转化途径"
            >此字段为单独配置，请先选择投放账户</el-form-item
          >
          <el-form-item
            v-for="(item, index) in pageData.groupNameList"
            :key="'info3-' + index"
          >
            <div class="u-mt15">{{ item.accountName }}</div>
            <div class="u-mt15">
              <el-input
                class="u-w350 u-mt15"
                placeholder="请输入点击监测链接"
                v-model="item.clickUrl"
              ></el-input>
            </div>
            <div class="u-mt15">
              <el-input
                class="u-w350 u-mt15"
                placeholder="请输入投放链接"
                v-model="item.link"
              ></el-input>
            </div>
            <div class="u-mt15">
              <el-input
                class="u-w350 u-mt15"
                placeholder="请输入第三方ActionBar点击监控链接"
                v-model="item.actionbarClickUrl"
              ></el-input>
            </div>
          </el-form-item>
        </div>
        <ContainerTitle>优化目标和计费</ContainerTitle>
        <el-form-item size="small" label="转化目标">
          <!-- <div class="u-black">激活数</div> -->
          <el-select
            class="u-w350"
            placeholder="请选择转化目标"
            v-model="pageData.ocpxActionType"
            @change="selectOcpxActionType"
          >
            <el-option
              v-for="ocpx in pageData.ocpxActionTypeOptions"
              :key="ocpx.id"
              :label="ocpx.name"
              :value="ocpx.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          size="small"
          label="深度转化目标"
          v-if="
            pageData.ocpxActionType == '180' || pageData.ocpxActionType == '53'
          "
        >
          <el-select
            class="u-w350"
            placeholder="请选择深度转化目标"
            v-model="pageData.deepConversionType"
            @change="selectDeepConversionType"
          >
            <el-option
              v-for="ocpx in pageData.deepConversionTypeOptions"
              :key="ocpx.id"
              :label="ocpx.name"
              :value="ocpx.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="计费方式">
          <div class="u-black">按展示计费（OCPM）</div>
        </el-form-item>
         <el-form-item
            label="付费roi系数"
            v-if="
              pageData.ocpxActionType == 191 ||
              pageData.deepConversionType == 92
            "
            prop="roi_ratio"
          >
            <el-input
              v-model="pageData.roi_ratio"
              oninput="value=value.replace(/[^\d.]/g,'')"
              placeholder="请填写付费rio系数"
              class="u-w350"
            ></el-input>
          </el-form-item>
        <div
          v-for="(item, index) in pageData.offerList"
          :key="index"
          style="margin-top: 30px"
        >
          <el-form-item
            label="出价账户"
            :prop="'offerList.' + index + '.selectAccount'"
            :rules="pageRules.selectAccount"
          >
            <el-select
              class="u-w350"
              placeholder="请选择出价账户"
              filterable
              multiple
              v-model="item.selectAccount"
              @change="handleChangeselectAccount"
            >
              <el-option
                v-for="items in pageData.groupNameList"
                :key="items.accountId"
                :label="items.accountName"
                :value="items.accountId"
                :disabled="items.selected"
              ></el-option>
            </el-select>
            已选择{{ item.selectAccount.length }}个账户
          </el-form-item>
          <el-form-item>
            <!-- <div class="bg-purple-light u-w300">[注意]转化目标为激活数时，出价范围1-3000元</div> -->
            <div v-for="(pitems, pindex) in item.priceArr" :key="pindex">
              <el-form-item
                label="转化目标出价"
                size="small"
                :prop="'offerList.' + index + '.priceArr.' + pindex + '.price'"
                :rules="pageRules.price"
                style="margin-left: -160px"
              >
                <el-input
                  class="u-w350"
                  placeholder="请输入出价1-100元"
                  v-model="pitems.price"
                ></el-input>
                <el-button
                  size="small"
                  type="primary"
                  style="margin-left: 10px"
                  @click="handleClickAdd(index)"
                  >添加</el-button
                >
                <el-button
                  size="small"
                  style="margin-left: 10px"
                  v-if="pindex !== 0"
                  @click="handleClickRemove(index, pindex)"
                  >删除</el-button
                >
              </el-form-item>
              <el-form-item
                v-if="pageData.deepConversionType != '0'  && pageData.deepConversionType !='92'"
                label="深度转化目标出价"
                size="small"
                :prop="
                  'offerList.' + index + '.priceArr.' + pindex + '.deepPrice'
                "
                :rules="pageRules.deepPrice"
                style="margin-left: -160px"
              >
                <el-input
                  class="u-w350"
                  placeholder="请输入深度转化目标出价"
                  v-model="pitems.deepPrice"
                ></el-input>
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              class="u-mt15"
              @click="handleClickNextAdd(index)"
              >添加下一组出价</el-button
            >
            <el-button
              size="small"
              class="u-mt15 u-ml10"
              v-if="index !== 0"
              @click="handleClickNextRemove(index)"
              >删除出价组</el-button
            >
          </el-form-item>
        </div>
        <el-form-item></el-form-item>
        <ContainerTitle>定向模版设置</ContainerTitle>
        <el-form-item label="定向方式">
          <el-radio-group
            v-model="pageData.autoTarget"
            @change="changeAutoTarget"
          >
            <el-radio-button :label="0">自定义定向</el-radio-button>
            <el-radio-button :label="1" v-if="pageData.unionAdvert == 0"
              >智能定向</el-radio-button
            >
          </el-radio-group>
        </el-form-item>
        <div
          v-for="(item, index) in pageData.groupNameList"
          :key="'info-5' + index"
        >
          <div>账户名：{{ item.accountName }}</div>
          <el-form-item
            size="small"
            label="定向模版文件名："
            class="u-mt15"
            :prop="'groupNameList.' + index + '.moudleName'"
            :rules="pageRules.moudleName"
          >
            <el-select
              class="u-w350"
              placeholder="请选择定向模版文件名"
              filterable
              v-model="item.moudleName"
              @change="handleChangeMoudleName"
            >
              <el-option
                v-for="(items, indexs) in item.moudleNameOptions"
                :key="indexs"
                :label="items.templateName"
                :value="items.id"
              ></el-option>
            </el-select>
            <!--  <el-select
              class="u-w350"
              placeholder="请选择定向模版文件名"
              filterable
              v-model="item.moudleName"
              @change="handleChangeMoudleName"
              v-if="pageData.unionAdvert == 1 || pageData.autoTarget == 1"
            >
              <el-option
                v-for="(items, indexs) in item.moudleNameOptions"
                :key="indexs"
                :label="items"
                :value="items"
              ></el-option>
            </el-select> -->
          </el-form-item>
        </div>
        <div v-if="pageData.unionAdvert == 1 || pageData.autoTarget == 1">
          <ContainerTitle>目标人群</ContainerTitle>
          <el-form-item label="自定义人群">
            <el-radio-group v-model="pageData.personType">
              <el-radio-button :label="1">新增目标人群</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="目标人群"
            ><div>此字段为单独配置，请先选择投放账户</div>
            <div>(请注意定向人群和排除人群不能相同)</div></el-form-item
          >
          <div
            v-for="(item, index) in pageData.groupNameList"
            :key="'info4-' + index"
          >
            <el-form-item>
              <div class="u-mt15">{{ item.accountName }}</div>
              <div class="u-mt15" v-if="pageData.autoTarget == 0">
                定向人群
                <el-select
                  multiple
                  class="u-w350 u-ml10"
                  placeholder="请选择定向人群"
                  filterable
                  v-model="item.directionalCrowd"
                >
                  <el-option
                    v-for="(items, indexs) in item.crowdOptions"
                    :key="indexs"
                    :label="items.name"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </div>
              <div class="u-mt15">
                排除人群
                <el-select
                  multiple
                  class="u-w350 u-ml10"
                  placeholder="请选择排除人群"
                  filterable
                  v-model="item.directionalCrowdOut"
                >
                  <el-option
                    v-for="(items, indexs) in item.crowdOptions"
                    :key="indexs"
                    :label="items.name"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </div>
        </div>
        <!--         <el-form-item size="small" label="投放链接：" v-if="pageData.market == 5 ">
          <el-input class="u-w350" placeholder="请选择投放链接" v-model="pageData.link"></el-input>
        </el-form-item>
        <el-form-item size="small" label="选择应用：" v-if="pageData.market == 2 && pageData.subAccount">
          <el-select class="u-w350" placeholder=" 请选择选择应用" v-model="pageData.chooseApplication">
            <el-option
              v-for="(item,index) in chooseAppeOptions"
              :key="index"
              :label="`${item.name},${item.tag}`"
              :value="item.id"
            ></el-option>
          </el-select>
          <div class="u-w350 chooseApp">
          <div v-for="(item,index) in pageData.chooseApplication" :key="index">
            <div v-html="item"></div>
          </div>
          </div>
        </el-form-item>
        <el-form-item size="small" label="点击监测链接：">
          <el-input class="u-w350" placeholder="请输入点击监测链接" v-model="pageData.clickUrl"></el-input>
        </el-form-item>
        <el-form-item class="u-w350" size="small" label="定向人群：" v-if="pageData.subAccount">
          <el-select
            multiple
            class="u-w350"
            placeholder="请选择定向人群"
            filterable
            v-model="pageData.directionalCrowd"
          >
            <el-option
              v-for="(item,index) in crowdOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="u-w350" size="small" label="排除人群：" v-if="pageData.subAccount">
          <el-select
            multiple
            class="u-w350"
            placeholder="请选择排除人群"
            filterable
            v-model="pageData.directionalCrowdOut"
          >
            <el-option
              v-for="(item,index) in crowdOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="u-w350" size="small" label="优先应用商店下载：" v-if="pageData.market == 2">
          <el-radio-group v-model="pageData.firstDown">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">自定义</el-radio>
          </el-radio-group>
          <el-form-item
            class="u-w500"
            v-if="pageData.firstDown == 1"
            style="width:800px !important"
          >
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >全选</el-checkbox>
            <el-checkbox-group
              v-model="pageData.phoneType"
              @change="handleCheckedChange"
              style="display:inline"
            >
              <el-checkbox label="huawei">华为</el-checkbox>
              <el-checkbox label="oppo">OPPO</el-checkbox>
              <el-checkbox label="vivo">VIVO</el-checkbox>
              <el-checkbox label="xiaomi">小米</el-checkbox>
              <el-checkbox label="meizu">魅族</el-checkbox>
              <el-checkbox label="smartisan">锤子</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form-item>-->
        <el-form-item class="u-w350" size="small" label="年龄：">
          <el-input class="u-w75" v-model="pageData.minYears"></el-input>-
          <el-input class="u-w75" v-model="pageData.maxYears"></el-input>
          <div class="u-w350">
            年龄范围在18-55之间（输入0-0，为年龄选择不限）
          </div>
        </el-form-item>

        <!--         <div v-for=" (item,index) in pageData.priceArr" :key="index">
          <el-form-item
            size="small"
            :label="index == 0  ? '出价（元）：':''"
            :prop="'priceArr.'+ index +'.price'"
            :rules="pageRules.price"
          >
            <el-input
              class="u-w350"
              placeholder="请输入出价1-100元"
              v-model="item.price"
              onkeyup="this.value = this.value.replace(/[^\d.]/g,'')"
            ></el-input>
            <el-button
              size="small"
              type="primary"
              style="margin-left:10px;"
              @click="handleClickAdd"
            >添加</el-button>
            <el-button
              size="small"
              style="margin-left:10px;"
              v-if="index !== 0"
              @click="handleClickRemove(index)"
            >删除</el-button>
          </el-form-item>
        </div>-->
        <el-form-item size="small" label="投放时间：">
          <el-input v-model="pageData.putDate" class="u-w350"></el-input>
          <div>
            1.格式：星期几（点-点、点-点）。不填写具体时间，为全天投放
            <br />2.0-23表示当日全天投放，6-6表示 六点时段投放
            <br />3.多个时段用中文逗号隔开
            <br />4.例：1（0-2、6-6、22-23），2（10-23），
          </div>
        </el-form-item>
        <!--         <el-form-item
          size="small"
          label="模板内容："
          v-if="pageData.moudleName && pageData.moudleName"
        >
          <div class="u-w350">
            <div v-html="pageData.moudleCont"></div>
          </div>
        </el-form-item> -->
        <el-form-item size="small" label="优化目标出价类型：">
          <!-- {{pageData.offerType}} -->
          OCPM
        </el-form-item>
        <ContainerTitle>广告创意</ContainerTitle>
        <el-form-item prop="AdvCreative" size="small" label="广告组创意：">
          <el-input
            maxlength="50"
            class="u-w350"
            placeholder="请输入广告组创意"
            v-model="pageData.AdvCreative"
          ></el-input>
        </el-form-item>
        <el-form-item prop="advLocal" size="small" label="广告位置：">
          <el-select
            v-if="pageData.unionAdvert == 0"
            class="u-w350"
            placeholder="请选择广告位置"
            filterable
            v-model="pageData.advLocal"
          >
            <el-option
              v-for="item in ADV_ADRESS"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <div v-else class="u-black">联盟广告</div>
        </el-form-item>
        <el-form-item label="创意类型">
          <el-radio-group v-model="pageData.programCreative">
            <el-radio-button :label="0">自定义</el-radio-button>
            <el-radio-button :label="1">程序化</el-radio-button>
          </el-radio-group>
          <div
            class="bg-purple-light text-info u-mt15"
            v-if="pageData.programCreative == 0"
          >
            <div>广告组数量=视频数量</div>
            <div>即：5个视频生成5个广告组</div>
          </div>
          <div class="bg-purple-light text-info u-mt15" v-else>
            <div>1、快手接口规定：每天最多创建60个程序化创意2.0组</div>
            <div>2、加白名单账号可使用程序化创意2.0</div>
            <div>3、广告组数量=创意组数量</div>
            <div>即：5个视频组成1个创意组,则5个视频生成一个广告组</div>
          </div>
        </el-form-item>
        <el-form-item label="创意制作方式">
          <el-radio-group v-model="pageData.matterType">
            <el-radio-button :label="1">本地上传</el-radio-button>
            <el-radio-button :label="2">素造视频</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item size="small" label="素材类型：">
          <!-- pageData.matterType -->
          竖版视频
        </el-form-item>
        <el-form-item prop="btnText" size="small" label="行动号召按钮文案：">
          <el-select
            class="u-w350"
            placeholder="请选择行动号召按钮文案"
            filterable
            v-model="pageData.btnText"
          >
            <el-option
              v-for="item in BTN_TEXT"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="素材挖掘" v-if="pageData.programCreative == 1">
          <el-radio-group v-model="pageData.assetMining">
            <el-radio-button :label="0">关闭</el-radio-button>
            <el-radio-button :label="1">开启</el-radio-button>
          </el-radio-group>
          <div class="bg-purple-light text-info u-mt15">
            快手将从您的素材库中挖掘出优秀的素材合成创意，参与投放。该方式投放的广告创意可以在“报表-程序化创意报表（新）“中查看
          </div>
        </el-form-item>
        <el-form-item label="封面类型">
          <el-radio-group
            v-model="isAutoCz"
            class="u-mb10"
            @change="changeAntoCz"
          >
            <el-radio-button :label="0">手动抽帧</el-radio-button>
            <el-radio-button :label="1">自动抽帧</el-radio-button>
            <el-radio-button :label="2">智能抽帧</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="videoSrc"
          size="small"
          label="解析视频："
          ref="creativeUploadVideo"
          v-show="pageData.matterType == 1"
        >
          <!--  <div class="bg-purple-light text-info u-mb10">
            <div>视频格式：</div>
            <div>1、分辨率不小于720p</div>
            <div>2、视频码率不小于1000kbps</div>
            <div>3、帧率不小于20fps</div>
            <div>4、音频码率不小于64kbps</div>
            <div>5、视频时长需满足时长范围为3秒～10分钟</div>
            <div>6、尺寸：720*1280</div>
            <div>7、目前支持1-15个视频</div>
          </div> -->
          <div>
            <el-input
              type="textarea"
              class="u-w500"
              :rows="15"
              placeholder=""
              v-model="copyVideoInfo"
            ></el-input>
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="analysisVideo(copyVideoInfo)"
              >解析视频</el-button
            >
          </div>
          <div v-if="pageData.videoFileList.length > 0" class="u-mt30 u-mr10">
            <div
              v-for="(item, index) in pageData.videoFileList"
              :key="index"
              class="video-content"
            >
              <div style="position: relative; width: 200px;margin-top:50px">
                <video
                  :src="item.videoUrl"
                  controls="controls"
                  class="u-mr10"
                  id="avatar"
                ></video>
                <i
                  class="el-icon-close video-icon"
                  @click="deleteVideoList(index)"
                ></i>
              </div>
              <div class="video-name">{{ item.fileName }}</div>
              <el-select
                class="chooseAccount"
                placeholder="请选择分配账户"
                filterable
                v-model="item.accounts"
              >
                <el-option
                  v-for="(items, indexs) in pageData.groupNameList"
                  :key="indexs"
                  :label="items.accountName"
                  :value="items.accountId"
                ></el-option>
              </el-select>
              <el-button
                type="primary"
                class="chooseImg"
                v-if="isAutoCz == '0'"
                @click="handleClickChoosePic(1, index)"
                >选取封面帧</el-button
              >
              <el-upload
                ref="creativeUpload"
                multiple
                :limit="15"
                :on-exceed="handleExceed"
                :disabled="isAutoCz == '1'"
                :action="`${BASE_URL}/marketing/api/task/upload_cover`"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeAvatarUpload"
                :on-remove="
                  (file, fileList) => {
                    handleRemove(file, fileList, index);
                  }
                "
                :file-list="pageData.videoFileList[index].fileArray"
                :on-success="
                  (file, fileList) => {
                    handleSuccessImg(file, fileList, index);
                  }
                "
                v-if="isAutoCz == '0'"
              >
                <div slot="tip" class="el-upload__tip u-w350">
                  只能上传尺寸720*1280，.jpg格式，且不超过2M，最多15张图片
                </div>
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
          <!--  <el-upload
            class="avatar-uploader u-w350 u-mt30"
            ref="uploadVideo"
            multiple
            :show-file-list="true"
            :on-exceed="handleExceedVideo"
            :action="`${BASE_URL}/marketing/api/task/upload_video`"
            :auto-upload="true"
            :on-progress="uploadVideoProcess"
            :before-upload="videoBeforeUpload"
            :on-change="onChangeVideo"
            :on-success="handleSuccessVideo"
            accept=".mp4"
            :on-remove="handleRemoveVideo"
          >
            <div slot="tip" class="el-upload__tip u-w350">(上传视频)</div>
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
        </el-form-item>
        <el-form-item
          prop="videoSrc"
          size="small"
          label="素造视频:"
          ref="creativeszUploadVideo"
          v-if="pageData.matterType == 2"
        >
          <span>视频页数:&nbsp;</span>
          <el-input-number
            v-model="szVideoPageNum"
            :min="1"
            label="视频页数"
          ></el-input-number>
          <el-button type="primary" @click="chooseszVideo" class="u-ml10"
            >选择视频</el-button
          >
          <!--  <div
            v-if="pageData.szVideoSrc && pageData.szVideoSrc.url"
            class="u-mt15 sz-video-content"
          >
            <video
              :src="pageData.szVideoSrc.url"
              controls="controls"
              id="avatar"
              style="display: block"
            ></video>
            <div class="chooseImg">
              <div>
                <el-button
                  type="primary"
                  @click="handleClickChoosePic(2)"
                  v-if="isAutoCz == '0'"
                  >抽帧</el-button
                >
              </div>
            </div>
          </div> -->
          <div v-if="pageData.szVideoFileList.length > 0" class="u-mt15 u-mr10">
            <div
              v-for="(item, index) in pageData.szVideoFileList"
              :key="index"
              style="position: relative"
            >
              <video
                :src="item.url"
                controls="controls"
                class="u-mr10 u-mt15"
                id="avatar"
                style="display: block"
              ></video>
              <el-select
                class="chooseAccount"
                placeholder="请选择分配账户"
                filterable
                v-model="item.accounts"
              >
                <el-option
                  v-for="(items, indexs) in pageData.groupNameList"
                  :key="indexs"
                  :label="items.accountName"
                  :value="items.accountId"
                ></el-option>
              </el-select>
              <el-button
                type="primary"
                class="chooseImg"
                @click="deleteSZvideo(index)"
                >删除</el-button
              >
              <el-upload
                class="u-mt15"
                ref="creativeUpload"
                multiple
                :limit="15"
                :on-exceed="handleExceed"
                v-if="isAutoCz == '0'"
                :action="`${BASE_URL}/marketing/api/task/upload_cover`"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeAvatarUpload"
                :on-remove="
                  (file, fileList) => {
                    handleRemove(file, fileList, index);
                  }
                "
                :file-list="pageData.szVideoFileList[index].fileArray"
                :on-success="
                  (file, fileList) => {
                    handleSuccessImg(file, fileList, index);
                  }
                "
              >
                <div slot="tip" class="el-upload__tip u-w350">
                  只能上传尺寸720*1280，.jpg格式，且不超过2M，最多15张图片
                </div>
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          prop="fileList"
          size="small"
          label="上传封面图："
          ref="creativeUploadImg"
          v-if="isAutoCz == '1'"
        >
          <!-- <el-radio-group
            v-model="isAutoCz"
            class="u-mb10"
            @change="changeAntoCz"
          >
            <el-radio-button :label="0">手动抽帧</el-radio-button>
            <el-radio-button :label="1">自动抽帧</el-radio-button>
          </el-radio-group> -->
          <!--  <el-upload
            class="upload-demo b50"
            ref="creativeUpload"
            multiple
            :limit="15"
            :on-exceed="handleExceed"
            :disabled="isAutoCz == '1'"
            :action="`${BASE_URL}/marketing/api/task/upload_cover`"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove"
            :on-change="onChangeImg"
            :file-list="fileArray"
            :on-success="handleSuccessImg"
            :class="{ hide: isAutoCz == '1' }"
          >
            <div slot="tip" class="el-upload__tip u-w350">
              只能上传尺寸720*1280，.jpg格式，且不超过2M，最多15张图片
            </div>
            <i class="el-icon-plus"></i>
          </el-upload> -->
          <div class="bg-purple-light text-info u-mt30" v-if="isAutoCz == '1'">
            【本地视频自动抽帧说明】<br />
            1、单个视频每个账号抽帧8张封面<br />
            2、将根据选择账号数量，决定单个视频抽帧封面总数<br />
            3、多次点击自动抽帧，以最后一次抽帧的封面为准
          </div>
          <div
            v-if="
              pageData.videoFileList.length != 0 && pageData.matterType == 1
            "
            class="u-mt15"
          >
            <el-button type="primary" @click="handleClickChoosePic(1)"
              >自动抽帧</el-button
            >
          </div>
          <div
            v-if="
              pageData.szVideoFileList.length != 0 && pageData.matterType == 2
            "
            class="u-mt15"
          >
            <el-button type="primary" @click="handleClickChoosePic(2)"
              >自动抽帧</el-button
            >
          </div>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <!--         <el-form-item
          prop="szfileList"
          size="small"
          label="上传素造封面图："
          ref="szcreativeUploadImg"
          v-show="pageData.matterType == 2"
        >
          <el-radio-group
            v-model="isAutoCz"
            class="u-mb10"
            @change="changeAntoCz"
          >
            <el-radio-button :label="0">手动抽帧</el-radio-button>
            <el-radio-button :label="1">自动抽帧</el-radio-button>
          </el-radio-group>
          <el-upload
            class="upload-demo b50"
            ref="szcreativeUpload"
            multiple
            :limit="15"
            :disabled="isAutoCz == '1'"
            :on-exceed="handleExceed"
            :action="`${BASE_URL}/marketing/api/task/upload_cover`"
            list-type="picture-card"
            :on-preview="szhandlePictureCardPreview"
            :before-upload="beforeAvatarUpload"
            :on-remove="szhandleRemove"
            :on-change="szonChangeImg"
            :file-list="szfileArray"
            :on-success="szhandleSuccessImg"
            :class="{ hide: isAutoCz == '1' }"
          >
            <div slot="tip" class="el-upload__tip u-w350">
              只能上传尺寸720*1280，.jpg格式，且不超过2M，最多15张图片
            </div>
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="bg-purple-light text-info u-mt15" v-if="isAutoCz == '1'">
            【素造视频自动抽帧说明】<br />
            1、因快手抽帧接口限制，每个视频抽帧8张封面图<br />
            2、多次点击自动抽帧，以最后一次抽帧的封面为准
          </div>
          <div
            v-if="
              isAutoCz == '1' && Object.keys(pageData.szVideoSrc).length != 0
            "
            class="u-mt15"
          >
            <el-button type="primary" @click="handleClickChoosePic(2)"
              >自动抽帧</el-button
            >
          </div>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item> -->
        <el-form-item size="small" label="作品广告语：">
          <!-- <el-input  
          class="u-w350"
          v-model="pageData.slogan"
          maxlength="30"
          ></el-input>-->
          <div v-for="(item, index) in pageData.slogan" :key="index">
            <el-form-item size="small" label prop="slogan">
              <el-input
                class="u-w350"
                placeholder="请输入作品广告语"
                v-model="item.slogan"
                maxlength="30"
              ></el-input>
              <el-button
                size="small"
                type="primary"
                style="margin-left: 10px"
                @click="handleClickAddSlogan"
                >添加</el-button
              >
              <el-button
                size="small"
                style="margin-left: 10px"
                v-if="index !== 0"
                @click="handleClickRemoveSlogan(index)"
                >删除</el-button
              >
            </el-form-item>
          </div>
          <div>
            注意：
            <br />1-6个，每个长度为1-30字符
          </div>
        </el-form-item>
        <el-form-item label="创意分类" prop="industry">
          <el-cascader
            v-model="pageData.industry"
            :props="{ value: 'code' }"
            :options="industryOptions"
            @change="handleChangeIndustry"
            class="u-w350"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item size="small" label="创意标签">
          <div class="bg-purple-light text-info u-w350">
            最多20个标签，每个不超过10个字，可空格分隔
          </div>
          <div
            v-for="(item, index) in pageData.creativeLabel"
            :key="index"
            class="u-mt15"
          >
            <el-form-item size="small" label>
              <el-input
                class="u-w350"
                placeholder="1-20个汉字"
                v-model="item.label"
                :maxlength="index == 0 ? 5000 : 20"
                :disabled="index != 0"
              ></el-input>
              <el-button
                type="primary"
                style="margin-left: 10px"
                v-if="index == 0"
                @click="generateCreativeLabel"
                >生成标签</el-button
              >
              <el-button
                style="margin-left: 10px"
                v-else
                @click="deleteCreativeLabel(index)"
                >删除</el-button
              >
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item
          size="small"
          label="封面贴纸"
          v-if="pageData.programCreative == 1"
        >
          <el-radio-group v-model="pageData.stickerStyles">
            <el-radio-button label="0">不使用</el-radio-button>
            <el-radio-button label="1">使用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="封面广告语"
          v-if="pageData.programCreative == 1 && pageData.stickerStyles == 1"
        >
          <el-input
            type="textarea"
            class="u-w350"
            placeholder="长度1-14个字符,一行一个回车键换行"
            v-model="pageData.coverSlogans"
          ></el-input>
          <el-button
            type="primary"
            style="margin-left: 10px"
            @click="generateCoverSlogans"
            >生成广告语</el-button
          >
          <div v-for="(item, index) in pageData.coverSlogansList" :key="index">
            <div class="u-mt15">
              <span
                class="u-ml10"
                style="display: inline-block; width: 200px"
                >{{ item }}</span
              >
              <el-button
                type="text"
                class="u-ml10"
                @click="deleteCoverSlogans(index)"
                >删除</el-button
              >
            </div>
          </div>
        </el-form-item>
      </el-form>
      <el-dialog
        :visible.sync="dialogVisibleszVideo"
        width="45%"
        :show-close="false"
      >
        <div class="u-mt15">
          <span class="u-mr10">选择前</span
          ><el-input
            class="u-w75"
            v-model="pageData.szVideoFirstNum"
            type="number"
          ></el-input
          >-
          <el-input
            class="u-w75"
            v-model="pageData.szVideoSecondNum"
            onkeyup="value=value.replace(/[^\d]/g,'')"
          ></el-input
          ><span class="u-ml10">项视频</span>
          <el-button
            type="primary"
            size="small"
            class="u-ml10"
            @click="selectSzRange"
            >确认</el-button
          >
          <el-checkbox
            v-model="pageData.chooseAllSz"
            @change="chooseAllSzVideo"
            style="float: right"
            >全选</el-checkbox
          >
        </div>
        <el-row :gutter="20" class="u-mt15">
          <el-col
            :span="8"
            v-for="(item, index) in szVideoList"
            :key="index"
            style="text-align: center"
            class="u-mt15"
          >
            <div
              style="position: relative"
              @click="handleClickChooseSZ(item, index)"
            >
              <video :src="item.url" controls="controls" id="avatar"></video>
              <div class="imgList-icon">
                <img
                  v-if="!item.userCheck"
                  src="@/assets/img/checked.png"
                  alt
                />
                <img v-else src="@/assets/img/checked2.png" alt />
              </div>
            </div>
          </el-col>
        </el-row>
        <span slot="title">
          <h2 style="text-align: center">选择视频[多选]</h2>
          <div style="float: right">
            <el-button @click="handleChooseszCancel">取 消</el-button>
            <el-button type="primary" @click="handleChooseszSure"
              >确 定</el-button
            >
          </div>
        </span>
        <!-- <div>
          <div v-for="(item,index) in szVideoList" :key="index" class="sz-video u-mr10">
            <video :src="item" controls="controls" id="avatar"></video>
          </div>
        </div>-->
      </el-dialog>
      <el-dialog
        title="封面"
        :visible.sync="dialogVisibleImg"
        width="45%"
      >
        <div class="dialogCont">
          <div v-if="imgList.length > 0" class="dialogCont">
            <div
              v-for="(item, index) in imgList"
              :key="index"
              class="dialogImgCont"
              @click="handleClickChoose(item, index)"
            >
              <div class="imgList-icon" v-if="item.showIcon">
                <img
                  v-if="!item.userCheck"
                  src="@/assets/img/checked.png"
                  alt
                />
                <img v-else src="@/assets/img/checked2.png" alt />
              </div>
              <img :src="item.url" alt class="imgList" />
            </div>
          </div>
          <!-- <div>内容为空</div> -->
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleImg = false">取 消</el-button>
          <el-button
            type="primary"
            @click="handleChooseSure"
            v-if="showConfirmBtn"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </Container>
    <Affix :offset-bottom="0">
      <ButtonGroup isFixed align="right">
        <el-button size="small" @click="$router.back()">返回</el-button>
        <el-button
          size="small"
          type="primary"
          @click="handleEnsure"
          v-loading.fullscreen.lock="fullscreenLoading"
          >确定</el-button
        >
      </ButtonGroup>
    </Affix>
  </div>
</template>

<script>
import ContainerTitle from "@/components/container-title";
import Container from "@/components/container";
import Affix from "@/components/affix";
import ButtonGroup from "@/components/button-group";
import { ADV_ADRESS, BTN_TEXT, MAEKETOPTIONS } from "@/assets/js/flow-option";
const validateMoney = (rule, value, callback) => {
  var patrn = /^\d+(\.\d+)?$/;
  if (value == "") {
    callback(new Error("请输入出价"));
  } else if (value.indexOf(".") != -1 && value.split(".")[1].length > 3) {
    callback(new Error("最多输入三位小数点")); //小数点后两位
  } else if (!patrn.exec(value)) {
    callback(new Error("请您输入数字")); //防止输入多个小数点
  } else {
    callback();
  }
};
export default {
  components: {
    ContainerTitle,
    Container,
    Affix,
    ButtonGroup,
  },
  data() {
    var checkRoi = (rule, value, callback) => {
      var reg = /^[+]?\d+(?:\.\d{1,3})?$/;
      if (value == null) {
        callback(new Error("请输入rio系数"));
        return;
      }
      if(value == 0){
        callback(new Error("rio系数不能为0"));
      }else if (value > 100) {
        //重点重点，下面就是填写提示的文字
        callback(new Error("rio系数不能为超过100"));
      } else if(!reg.test(value)) {
        callback(new Error("rio系数不超过3位小数"));
      }else {
        callback();
      }
    };
    return {
      copyVideoInfo: null, //复制的视频信息
      szVideoPageNum: 1, //素造视频页数
      showConfirmBtn: false,
      fullscreenLoading: false,
      ADV_ADRESS,
      BTN_TEXT,
      MAEKETOPTIONS,
      pageAction: this.$route.query.action,
      BASE_URL: process.env.VUE_APP_BASE_URL,
      // 下拉
      platformOptions: [],
      customerOptions: [],
      productOptions: [],
      industryOptions: [], //创意分类
      isAutoCz: 0, //是否自动抽帧 0否 1是
      dialogVisibleImg: false,
      dialogVisibleszVideo: false,
      mainAccountOptions: [],
      subAccountOptions: [],
      productNameOptions: [],
      moudleNameOptions: [],
      chooseAppeOptions: [],
      chooseSZvideoList: [],
      crowdOptions: [],
      // CrowdOutOptions:[],
      advLocalOptions: [],
      btnTextOptions: [],
      fileArray: [], //默认深拷贝一份图片数据
      szfileArray: [],
      videoIndex: "", //选中的视频索引
      szVideoIndex: "",
      isIndeterminate: false, //应用商店下载全选
      checkAll: false,
      allChecked: ["huawei", "oppo", "vivo", "xiaomi", "meizu", "smartisan"],
      subOptionProps: {
        value: "accountId",
        label: "label",
        children: "children",
        multiple: true,
      },
      priceArr: [
        {
          price: "", //出价
        },
      ],
      pageData: {
        chooseAllSz: false, //选择所有的素造
        szVideoFirstNum: 1, //素造前一项
        szVideoSecondNum: 1, //素造第二项
        coverSlogans: "", //作品广告语输入框
        coverSlogansList: [], //作品广告语
        stickerStyles: 0, //是否使用封面贴纸 0不使用 1使用
        autoTarget: 0, //智能定向 0关闭 1开启
        assetMining: 0, //素材挖掘 0关闭 1开启
        programCreative: 0, //是否程序化创意 0否 1:程序化创意
        unionAdvert: 0, //投放范围 0默认 1广告联盟
        ocpxActionType: "180", //转化目标 默认激活数
        deepConversionType: "0", //深度转化目标
        deepConversionTypeOptions: [
          { name: "无", id: "0" },
          { name: "付费", id: "3" },
          { name: "次日留存", id: "7" },
          { name: "付费roi", id: "92" },
        ],
        ocpxActionTypeOptions: [
          { name: "行为数", id: "2" },
          { name: "激活数", id: "180" },
          { name: "注册", id: "396" },
          { name: "付费", id: "190" },
          { name: "付费roi", id: "191" },
        ],
        targetType: 0, //
        industry: [], //行业
        settingType: 1, //设置方式
        mainAccount: null,
        subAccount: null,
        advName: null,
        market: 2,
        budget: null,
        productName: null,
        advGroupName: null,
        moudleName: null,
        link: null,
        chooseApplication: null,
        firstDown: 0,
        phoneType: [],
        clickUrl: null,
        directionalCrowd: null,
        directionalCrowdOut: null,
        moudleCont: null,
        offerType: null,
        // years:[21,40],
        minYears: 18,
        maxYears: 55,
        putDate: null,
        launchRange: 1, //投放范围
        personType: 1, //自定义人群类型
        groupNameList: [],
        creativeLabel: [
          {
            label: "",
          },
        ], //创意标签
        offerList: [
          {
            selectAccount: "", //选择的出价账户
            priceArr: [
              {
                price: "", //出价
                deepPrice: "", //深度转化出价
              },
            ],
          },
        ], //子账户出价列表
        priceArr: [
          {
            price: "",
          },
        ],
        AdvCreative: null,
        advLocal: null,
        matterType: 1, //默认本地上传
        btnText: null,
        slogan: [
          {
            slogan: "",
          },
        ],
        fileList: [],
        szfileList: [],
        videoSrc: {},
        videoFileList: [],
        szVideoFileList: [],
        szVideoSrc: {}, //选取的素造视频
      },

      pageRules: {
         roi_ratio:{
          required:true,
          validator:checkRoi,
          trigger: ["blur", "change"],
        },
        mainAccount: {
          required: true,
          message: "请选择投放产品",
          trigger: ["change", "blur"],
        },
        creativeLabel: {
          required: true,
          message: "请输入创意标签",
          trigger: ["blur"],
        },
        selectAccount: {
          required: true,
          message: "请选择出价账户",
          trigger: ["blur"],
        },
        subAccount: {
          required: true,
          message: "请选择快手子账户",
          trigger: ["blur"],
        },
        advName: {
          required: true,
          message: "请输入广告计划名称",
          trigger: ["blur"],
        },
        productName: {
          required: true,
          message: "请选择产品名称",
          trigger: ["change", "blur"],
        },
        advGroupName: {
          required: true,
          message: "请输入广告组名称",
          trigger: ["blur"],
        },
        moudleName: {
          required: true,
          message: "请选择定向模版文件名",
          trigger: ["change", "blur"],
        },
        price: [
          {
            required: true,
            /*  message: "请输入出价", */
            trigger: "blur",
            validator: validateMoney,
          },
        ],
        deepPrice: [
          {
            required: true,
            /*  message: "请输入出价", */
            trigger: "blur",
            validator: validateMoney,
          },
        ],
        /*         AdvCreative: {
          required: false,
          message: "请输入广告组创意",
          trigger: ["blur"],
        }, */
        advLocal: {
          required: true,
          message: "请选择广告位置",
          trigger: ["change", "blur"],
        },
        btnText: {
          required: true,
          message: "请选择行动号召按钮文案",
          trigger: ["change", "blur"],
        },
        slogan: {
          required: true,
          message: "不能为空",
          trigger: ["blur", "change"],
        },
        clickUrl: {
          required: true,
          message: "不能为空",
          trigger: ["blur"],
        },
        fileList: {
          required: this.matterType == 1 ? true : false,
          message: "请上传封面图片",
          trigger: ["change", "blur"],
        },
        szfileList: {
          required: this.matterType == 2 ? true : false,
          message: "请上传封面图片",
          trigger: ["change", "blur"],
        },
        //本地上传视频路径
        videoSrc: {
          required: true,
          message: "请上传视频",
          trigger: ["change", "blur"],
        },
      },

      //上传图片
      importUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      importLoading: false,
      userCheck: false,
      imgList: [],
      arrImgList: [],
      arrszImgList: [],
      szVideoList: [], //素造视频列表
      // 上传视频
      videoFlag: false,
      videoUploadPercent: 0,
    };
  },
  computed: {
    pageTitle() {
      return {
        create: "新增",
        edit: "编辑",
        detail: "查看",
      }[this.pageAction];
    },
    sureParams() {
      let groupNames = [];
      let products = [],
        crowds = [],
        prices = [],
        accounts = [],
        levelNames = [],
        creativeLabel = [],
        videoList = [],
        ksTemplates = [];
      creativeLabel = this.pageData.creativeLabel.filter(
        (item, index) => index > 0
      );
      /* if (creativeLabel.length == 0) {
        this.$message.error("请生成创意标签");
        return;
      } */
      if (this.pageData.settingType == 1) {
        //统一设置
        let obj = {
          accountId: this.pageData.groupNameList[0].accountId,
          groupName: this.pageData.advGroupName,
          planName: this.pageData.advName,
        };
        levelNames.push(obj);
      } else if (this.pageData.settingType == 2) {
        this.pageData.groupNameList.forEach((item) => {
          let obj = {
            accountId: item.accountId,
            groupName: item.advGroupName,
            planName: item.advName,
          };
          levelNames.push(obj);
        });
      } else if (this.pageData.settingType == 3) {
        this.pageData.groupNameList.forEach((item) => {
          let obj = {
            accountId: item.accountId,
            planName: item.advName,
          };
          levelNames.push(obj);
        });
      }
      this.pageData.offerList.forEach((oitem) => {
        let obj = {
          accountId: [],
          price: [],
        };
        /* obj.price = oitem.priceArr.map((citems) => citems.price); */
        obj.price = oitem.priceArr;
        obj.accountId = oitem.selectAccount;
        prices.push(obj);
      });
      if (this.pageData.matterType == 1) {
        this.pageData.videoFileList.forEach((item) => {
          let obj = {
            cover: item.fileList,
            id: item.id,
            url: item.videoUrl,
            accounts:
              item.accounts == ""
                ? null
                : [{ accountId: item.accounts, accountName: "" }],
          };
          videoList.push(obj);
        });
      } else {
        this.pageData.szVideoFileList.forEach((item) => {
          let obj = {
            cover: item.fileList,
            id: item.id,
            md5: item.md5,
            type: item.type,
            url: item.url,
            accounts: [{ accountId: item.accounts, accountName: "" }],
          };
          videoList.push(obj);
        });
      }
      this.pageData.groupNameList.forEach((item, index) => {
        groupNames.push({
          accountId: item.accountId,
          groupName: item.advGroupName,
        });
        ksTemplates.push({
          accountId: item.accountId,
          templateId: item.moudleName,
        });
        accounts.push({
          accounts: [
            {
              accountId: item.accountId,
              accountName: item.accountName,
            },
          ],
          masterAccountId: item.masterAccountId,
          masterAccountName: item.masterAccountName,
        });
        accounts;
        products.push({
          appStore: item.phoneType,
          clickUrl: item.clickUrl,
          actionbarClickUrl: item.actionbarClickUrl,
          useAppMarket: item.isFirst == true ? 1 : 0,
          webUrl: item.link,
        });
        if (this.pageData.market == 2) {
          if (this.pageData.targetType == 0) {
            item.chooseAppeOptions.forEach((citem) => {
              if (citem.id == item.chooseApplication) {
                products[index].id = citem.id;
                products[index].name = citem.name;
                products[index].accountId = citem.accountId;
                products[index].packageName = citem.packageName;
                products[index].tag = citem.tag;
              }
            });
          } else {
            item.chooseAppeOptions2.forEach((citem) => {
              if (citem.id == item.chooseApplication) {
                products[index].id = citem.id;
                products[index].ourId = citem.ourId;
                products[index].name = citem.name;
                products[index].accountId = citem.accountId;
                products[index].packageName = citem.packageName;
                products[index].tag = citem.tag;
              }
            });
          }
        } else if (this.pageData.market == 5) {
          products[index].accountId = item.accountId;
        }
       if (this.pageData.unionAdvert == 1 || this.pageData.autoTarget == 1) {
          let objs = {
            accountId: item.accountId,
            excludeCrowd: item.directionalCrowdOut,
            includeCrowd: item.directionalCrowd,
          };
          crowds.push(objs);
        } else {
          crowds = [];
        }
      });
      return {
        accounts: accounts,
        /* masterAccount: {
          accountId: this.pageData.mainAccount,
          accountName: this.mapMainAccountName(),
        }, */
        product: this.pageData.mainAccount,
        creative: {
          stickerStyles: this.pageData.stickerStyles == 1 ? true : false,
          coverSlogans: this.pageData.coverSlogansList,
          assetMining: this.pageData.assetMining == 1 && this.pageData.programCreative == 1? true : false,
          smartCover: this.isAutoCz == 2 ? true : false,
          autoFrame: this.isAutoCz == 1 ? true : false,
          localVideo: this.pageData.matterType == 1 ? true : false,
          action_bar_text: this.pageData.btnText,
          advertment: this.pageData.slogan.map((item) => item.slogan),
          creativeName: this.pageData.AdvCreative,
          creative_category: Number(
            this.pageData.industry[this.pageData.industry.length - 1]
          ), //创意分类
          creative_tag: creativeLabel.map((item) => item.label), //创意标题
          video: videoList,
        },
        group: {
          /*  groupNames: groupNames, //广告组名称 */
          autoTarget: this.pageData.autoTarget == 0 ? false : true,
          programCreative: this.pageData.programCreative,
          crowds: crowds,
          deepConversionType: parseFloat(this.pageData.deepConversionType),
          ocpxActionType: parseFloat(this.pageData.ocpxActionType),
          prices: prices,
          scene_id: this.pageData.advLocal,
          ksTemplates: ksTemplates,
          products: products,
          template: {
            customAge: [this.pageData.minYears, this.pageData.maxYears],
            schedule: {
              scheduleTime: this.pageData.putDate,
            },
          },
          unionAdvert: this.pageData.unionAdvert,
          roi_ratio:this.pageData.roi_ratio,
        },
        plan: {
          /* planName: this.pageData.advName, */
          type: this.pageData.market,
          levelNames: levelNames,
          levelType: this.pageData.settingType,
        },
        taskId: 1,
      };
    },
  },
  methods: {
    //删除视频
    deleteVideoList(index) {
      this.pageData.videoFileList.splice(index, 1);
    },
    //解析视频
    analysisVideo(data) {
      let copyVideoInfo = JSON.parse(data);
      copyVideoInfo.forEach((item) => {
        let covers = [];
        item.covers.forEach((items) => {
          let objs = { url: items.coverUrl };
          covers.push(objs);
        });
        let obj = {
          materialKuaishouId: item.materialKuaishouId,
          covers: covers,
          videoUrl: item.materialUrl,
          fileName: item.materialName,
        };
        this.pageData.videoFileList.push(obj);
      });
      this.pageData.videoFileList.forEach((item) => {
        if (!item.fileList) {
          this.$set(item, "fileList", []);
        }
        if (!item.fileArray) {
          this.$set(item, "fileArray", []);
        }
      });
      console.log(this.pageData.videoFileList);
    },
    chooseAllSzVideo() {
      console.log(this.pageData.chooseAllSz);
      this.chooseSZvideoList = [];
      if (this.pageData.chooseAllSz == true) {
        this.szVideoList.forEach((item) => {
          item.userCheck = true;
          this.chooseSZvideoList.push(item);
        });
        this.chooseSZvideoList.forEach((items) => {
          this.$set(items, "fileList", []);
        });
      } else {
        this.szVideoList.forEach((item) => {
          item.userCheck = false;
        });
      }
    },
    //选择素造视频的前几项范围
    selectSzRange() {
      this.pageData.szVideoFirstNum = Number(this.pageData.szVideoFirstNum);
      this.pageData.szVideoSecondNum = Number(this.pageData.szVideoSecondNum);
      if (this.pageData.szVideoSecondNum <= this.pageData.szVideoFirstNum) {
        this.$message.error("请输入正确的范围");
        return;
      }
      this.chooseSZvideoList = [];
      this.szVideoList.forEach((item) => {
        item.userCheck = false;
      });
      for (
        var i = this.pageData.szVideoFirstNum - 1;
        i < this.pageData.szVideoSecondNum;
        i++
      ) {
        this.szVideoList[i].userCheck = true;
        /* this.handleClickChooseSZ(this.szVideoList[i],i) */
        this.chooseSZvideoList.push(this.szVideoList[i]);
      }
      this.chooseSZvideoList.forEach((items) => {
        this.$set(items, "fileList", []);
      });
    },
    changeUnion() {
      if (this.pageData.unionAdvert == 1) {
        //广告联盟
        this.pageData.advLocal = 5;
        this.pageData.autoTarget = 0;
      }
      this.pageData.groupNameList.forEach((item) => {
        item.moudleName = null;
        item.moudleNameOptions = [];
      });
      this.handleChangesubAccount();
    },
    changeAutoTarget() {
      this.pageData.groupNameList.forEach((item) => {
        item.moudleName = null;
        item.moudleNameOptions = [];
      });
      this.handleChangesubAccount();
    },
    selectDeepConversionType() {},
    handleChangeMarket() {
      this.pageData.ocpxActionType = "180";
      this.pageData.deepConversionType = "0";
      if (this.pageData.market == 2) {
        //提升应用安装
        this.pageData.ocpxActionTypeOptions = [
          { name: "行为数", id: "2" },
          { name: "激活数", id: "180" },
          { name: "注册", id: "396" },
          { name: "付费", id: "190" },
        ];
      } else {
        //收集销售线索
        this.pageData.ocpxActionTypeOptions = [
          { name: "行为数", id: "2" },
          { name: "激活数", id: "180" },
          { name: "表单数", id: "53" },
          { name: "付费", id: "190" },
        ];
      }
      if (this.pageData.ocpxActionType == "180" && this.pageData.market == 2) {
        //提升应用安装 激活数
        this.pageData.deepConversionTypeOptions = [
          {
            name: "无",
            id: "0",
          },
          {
            name: "付费",
            id: "3",
          },
          {
            name: "付费roi",
            id: "92",
          },
          {
            name: "次日留存",
            id: "7",
          },
        ];
      }
      if (this.pageData.ocpxActionType == "180" && this.pageData.market == 5) {
        //收集销售线索 激活数
        this.pageData.deepConversionTypeOptions = [
          {
            name: "无",
            id: "0",
          },
          {
            name: "付费",
            id: "3",
          },
          {
            name: "次日留存",
            id: "7",
          },
        ];
      }
      if (this.pageData.ocpxActionType == "53" && this.pageData.market == 5) {
        //收集销售线索 表单数
        this.pageData.deepConversionTypeOptions = [
          {
            name: "无",
            id: "0",
          },
          {
            name: "付费",
            id: "3",
          },
          {
            name: "有效线索",
            id: "44",
          },
        ];
      }
    },
    selectOcpxActionType() {
      this.pageData.deepConversionType = "0";
      if (this.pageData.ocpxActionType == "180" && this.pageData.market == 2) {
        //提升应用安装 激活数
        this.pageData.deepConversionTypeOptions = [
          {
            name: "无",
            id: "0",
          },
          {
            name: "付费",
            id: "3",
          },
           {
            name: "付费roi",
            id: "92",
          },
          {
            name: "次日留存",
            id: "7",
          },
        ];
      }
      if (this.pageData.ocpxActionType == "180" && this.pageData.market == 5) {
        //收集销售线索 激活数
        this.pageData.deepConversionTypeOptions = [
          {
            name: "无",
            id: "0",
          },
          {
            name: "付费",
            id: "3",
          },
        ];
      }
      if (this.pageData.ocpxActionType == "53" && this.pageData.market == 5) {
        //收集销售线索 表单数
        this.pageData.deepConversionTypeOptions = [
          {
            name: "无",
            id: "0",
          },
          {
            name: "付费",
            id: "3",
          },
          {
            name: "有效线索",
            id: "44",
          },
        ];
      }
    },
    handleChangeIndustry() {
      // console.log(this.pageData.industry);
    },
    getIndustry(accountId) {
      this.$http({
        method: "post",
        url: "/marketing/api/task/get_creative_category",
        params: { accountId: accountId },
      }).then((res) => {
        let data = res.data.data.list;
        this.industryOptions = this.getTreeData(data);
      });
    },
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length == 0) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    deleteSZvideo(index) {
      this.pageData.szVideoFileList.splice(index, 1);
    },
    generateCoverSlogans() {
      let ary = this.pageData.coverSlogans.split(/[(\r\n)\r\n]+/);
      let err = 0;
      if (ary.length > 6) {
        this.$message.error("广告语个数不超过6个");
        return;
      }
      ary.forEach((item) => {
        let len = this.stringLength(item);
        console.log(len);
        if (len < 0 || len > 28) {
          err = 1;
        }
      });
      if (err == 1) {
        this.$message.error("广告语字符串应为0-14位");
        return;
      }
      this.pageData.coverSlogansList = ary;
    },
    deleteCoverSlogans(index) {
      this.pageData.coverSlogansList.splice(index, 1);
    },
    stringLength(str) {
      let codeLength = 0,
        code = 0;
      for (var i = 0; i < str.length; i++) {
        code = str.charCodeAt(i);
        if (code >= 0 && code <= 127) {
          codeLength += 1;
        } else {
          codeLength += 2;
        }
      }
      return codeLength;
    },
    generateCreativeLabel() {
      let sliceArr = this.pageData.creativeLabel.slice(0, 1);
      this.pageData.creativeLabel = sliceArr;
      let arr = this.pageData.creativeLabel[0].label.split(" ");
      if (arr.length > 20) {
        this.$message.error("最多生成20个创意标签");
        return;
      }
      arr.forEach((item) => {
        if (item.length > 10) {
          this.$message.error("每个创意标签最多10个字");
        } else {
          this.pageData.creativeLabel.push({ label: item });
        }
      });
    },
    deleteCreativeLabel(index) {
      this.pageData.creativeLabel.splice(index, 1);
    },
    changeAntoCz() {
      if (this.pageData.matterType == 1) {
        this.fileArray = [];
        this.pageData.fileList = [];
        this.pageData.videoFileList.forEach((item) => {
          item.fileArray = [];
          item.fileList = [];
        });
      } else {
        this.szfileArray = [];
        this.pageData.szfileList = [];
      }
    },
    selectFirst() {
      this.pageData.groupNameList.forEach((item) => {
        if (item.isFirst != true) {
          item.phoneType = [];
          item.checkAll = false;
        }
      });
    },
    selectCheckAll() {
      this.pageData.groupNameList.forEach((item) => {
        if (item.checkAll == true) {
          item.phoneType = [
            "huawei",
            "oppo",
            "vivo",
            "xiaomi",
            "meizu",
            "smartisan",
          ];
        } else {
          item.phoneType = [];
        }
      });
    },
    handleCheckAllChange(val) {
      this.pageData.phoneType = val ? this.allChecked : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length; //选中值的长度
      this.checkAll = checkedCount === this.allChecked.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.pageData.phoneType.length;
    },
    checkedChange(value) {},
    mapAccountName() {
      let value = this.subAccountOptions.find(
        (item) => item.accountId == this.pageData.subAccount
      );
      if (value) {
        return value.accountName;
      }
      return null;
    },
    mapMainAccountName() {
      let value = this.mainAccountOptions.find(
        (item) => item.accountId == this.pageData.mainAccount
      );
      if (value) {
        return value.accountName;
      }
      return null;
    },
    chooseszVideo() {
      //选择素造视频
      if (this.pageData.subAccount == null) {
        this.$message.error("请选择快手子账户");
        return;
      }
      let accountIds = [];
      this.pageData.subAccount.forEach((item) => {
        accountIds.push(item[1]);
      });
      this.$http({
        method: "post",
        url: "marketing/api/task/ad_creator_video_more",
        params: {
          accountIds: accountIds.join(),
          page: this.szVideoPageNum,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.dialogVisibleszVideo = true;
          this.chooseSZvideoList = [];
          this.szVideoList = res.data.data;
          for (let index = 0; index < this.szVideoList.length; index++) {
            this.$set(this.szVideoList[index], "userCheck", false);
            if (this.pageData.szVideoSrc.id == this.szVideoList[index].id) {
              this.$set(this.szVideoList[index], "userCheck", true);
            }
          }
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    videoBeforeUpload(file) {
      const isLt30MB = file.size / 1024 / 1024 < 100;
      const isSize = new Promise(function (resolve, reject) {
        let _URL = window.URL || window.webkitURL;
        let videoElement = document.createElement("video");
        // 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 元数据包括：时长、尺寸（仅视频）以及文本轨道。
        videoElement.addEventListener("loadedmetadata", function () {
          let width = videoElement.videoWidth;
          let height = videoElement.videoHeight;
          let duration = videoElement.duration; // 视频时长
          if (!isLt30MB)
            return this.$message.error("上传视频大小不能超过100MB！");
          if (Math.floor(duration) <= 0)
            return this.$message.error("上传视频时长不能为0S！");
          resolve();
          /* let valid = `${width}*${height}` === "720*1280";
          valid ? resolve() : reject(); */
        });
        videoElement.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          /* this.$message.error("上传视频尺寸为 720*1280！"); */
          return Promise.reject();
        }
      );
      return isSize;
    },
    uploadVideoProcess(event, file) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    handleSuccessVideo(res) {
      if (res.code == 1) {
        this.pageData.videoSrc = res.data;
        this.pageData.videoFileList.push(res.data);
        this.pageData.videoFileList.forEach((item) => {
          if (!item.fileList) {
            this.$set(item, "fileList", []);
          }
          if (!item.fileArray) {
            this.$set(item, "fileArray", []);
          }
        });
        this.videoFlag = false;
      } else {
        this.$message.error(res.data.msg);
      }
    },
    handleSuccessImg(res, file, index) {
      if (res.code == 1) {
        let data = res.data[0];
        /* this.pageData.fileList.push(data); */
        if (this.pageData.matterType == 1) {
          this.pageData.videoFileList[index].fileList.push(data);
        } else {
          this.pageData.szVideoFileList[index].fileList.push(data);
        }
      } else {
        this.$message.error(res.data.msg);
      }
    },
    szhandleSuccessImg(res) {
      if (res.code == 1) {
        let data = res.data[0];
        this.pageData.szfileList.push(data);
      } else {
        this.$message.error(res.data.msg);
      }
    },
    handleRemoveVideo(file, fileList) {
      /*  this.pageData.videoSrc = fileList.map((item) => item.response.data[0]); */
      // 停止上传
      if (fileList.length == 0) {
        this.pageData.videoFileList = [];
        this.pageData.videoSrc = {};
      } else {
        this.pageData.videoFileList = fileList.map(
          (item) => item.response.data
        );
      }
      this.uploadAbort("uploadVideo", file);
    },
    onChangeImg() {
      this.$refs["creativeUploadImg"].clearValidate();
    },
    szonChangeImg() {
      this.$refs["szcreativeUploadImg"].clearValidate();
    },
    onChangeVideo() {
      this.$refs["creativeUploadVideo"].clearValidate();
    },
    handleRemove(file, fileList, index) {
      let ary = [];
      fileList.forEach((item) => {
        if (item.response) {
          ary.push({
            id: item.response.data[0].id,
            url: item.response.data[0].url,
          });
        } else {
          ary.push({ id: item.id, url: item.url });
        }
      });
      if (fileList.length == 0) {
        this.pageData.fileList = [];
        if (this.pageData.matterType == 1) {
          this.pageData.videoFileList[index].fileList = [];
        } else {
          this.pageData.szVideoFileList[index].fileList = [];
        }
      }
      if (this.pageData.matterType == 1) {
        this.pageData.videoFileList[index].fileList = ary;
      } else {
        this.pageData.szVideoFileList[index].fileList = ary;
      }
    },
    szhandleRemove(file, fileList) {
      let ary = [];
      fileList.forEach((item) => {
        if (item.response) {
          ary.push({
            id: item.response.data[0].id,
            url: item.response.data[0].url,
          });
        } else {
          ary.push({ id: item.id, url: item.url });
        }
      });
      if (fileList.length == 0) {
        this.pageData.szfileList = [];
      }
      this.pageData.szfileList = ary;
    },
    uploadAbort(ref, file) {
      this.$refs[ref].abort(file);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        // return false
      } else if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        // return false
      }

      const isSize = new Promise(function (resolve, reject) {
        let _URL = window.URL || window.webkitURL;
        let width = 720;
        let height = 1280;

        let img = new Image();
        img.onload = function () {
          if (!isJPG)
            if (!isLt2M)
              return this.$message.error("上传头像图片大小不能超过 2MB!");
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("请上传720*1280尺寸的图片!");
          return Promise.reject();
        }
      );
      return isJPG && isLt2M && isSize;
    },
    handleExceed(files, fileList) {
      this.$message.error(
        `当前限制选择 15 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handleExceedVideo(files, fileList) {
      this.$message.error(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    szhandlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 下拉
    fetchPlatformOptions() {
      this.$http({
        method: "get",
        url: "/manage/api/bus/platform/get_platform",
        params: {
          status: 2,
          customerId: 0,
          productId: 0,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.platformOptions = res.data.data;
        }
      });
    },
    mapOptionValue(data, id) {
      let item = data.find((item) => item.id === id);
      if (item) {
        return item.name;
      }
      return "-";
    },
    handleChangeCustomerOptions() {
      this.pageData.productId = null;
    },
    // 确定
    handleEnsure() {
      this.createDetail();
    },
    //添加
    handleClickAdd(index) {
      this.pageData.offerList[index].priceArr.push({
        price: "",
        deepPrice: "",
      });
    },
    handleClickNextAdd() {
      this.pageData.offerList.push({
        selectAccount: "", //选择的出价账户
        priceArr: [
          {
            price: "", //出价
            deepPrice: "",
          },
        ],
      });
    },
    handleClickNextRemove(index) {
      let selectAccount = this.pageData.offerList[index].selectAccount;
      this.pageData.groupNameList.forEach((item) => {
        selectAccount.forEach((items) => {
          if (item.accountId == items) {
            item.selected = false;
          }
        });
      });
      this.pageData.offerList.splice(index, 1);
    },
    // 删除
    handleClickRemove(index, pindex) {
      this.pageData.offerList[index].priceArr.splice(pindex, 1);
    },
    handleClickAddSlogan() {
      this.pageData.slogan.push({
        slogan: "",
      });
    },
    // 删除
    handleClickRemoveSlogan(index) {
      this.pageData.slogan.splice(index, 1);
    },
    // 新建
    createDetail() {
      var str = [];
      var account_id = [];
      this.pageData.groupNameList.forEach((item, index) => {
        str.push(this.pageData.groupNameList[index].ourId);
        account_id.push(this.pageData.groupNameList[index].accountId);
      });
      // console.log(str);
      this.sureParams.group.products.ourId = str;
      this.sureParams.group.products.accountId = account_id;
      this.sureParams.group.productType = Number(this.pageData.targetType) + 1;
      if (this.sureParams.group.productType == "2") {
        this.sureParams.group.products.forEach((item, index) => {
          this.sureParams.group.products[index].ourId = str[index];
          this.sureParams.group.products[index].accountId = account_id[index];
        });
      }
      console.log(this.sureParams);
      if (this.pageData.stickerStyles == 1) {
        if (this.pageData.coverSlogansList.length == 0) {
          this.$message.error("请生成封面广告语");
          return;
        }
      }
      this.$refs.pageForm.validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          this.$http({
            method: "post",
            url: "/marketing/api/task/upload_third",
            data: this.sureParams,
          })
            .then((res) => {
              this.fullscreenLoading = false;
              if (res.data.code === 1) {
                this.$message.success(res.data.msg);
                this.$router.back();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              this.fullscreenLoading = false;
            });
        }
      });
    },
    // 详情
    getDetail() {
      this.$http({
        method: "get",
        url: "/manage/api/bus/account/get_by_id",
        params: {
          accountId: this.$route.query.id,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          if (this.pageAction === "edit") {
            let {
              id,
              platformId,
              username,
              // accountName,
              password,
              accountId,
              usernameIdList,
              customerId,
              productId,
              remarks,
            } = res.data.data;
            this.pageData = {
              id,
              platformId,
              username,
              // accountName,
              password,
              accountId,
              usernameIdList,
              customerId,
              productId,
              remarks,
            };
          } else {
            this.pageData = res.data.data;
          }
        }
      });
    },
    // 根据子账号获取应用，人群
    handleChangesubAccount() {
      let ary = [];
      if (typeof this.pageData.subAccount != "string") {
        this.subAccountOptions.forEach((item) => {
          this.pageData.subAccount.forEach((items) => {
            if (items[0] == item.accountId) {
              item.children.forEach((citem) => {
                if (items[1] == citem.accountId) {
                  this.$set(citem, "masterAccountId", items[0]);
                  this.$set(citem, "masterAccountName", item.accountName);
                  if (!citem.directionalCrowd) {
                    this.$set(citem, "directionalCrowd", null);
                  }
                  if (!citem.directionalCrowdOut) {
                    this.$set(citem, "directionalCrowdOut", null);
                  }
                  if (!citem.chooseApplication) {
                    this.$set(citem, "chooseApplication", "");
                  }
                  if (!citem.isFirst) {
                    this.$set(citem, "isFirst", "");
                  }
                  if (!citem.phoneType) {
                    this.$set(citem, "phoneType", []);
                  }
                  if (!citem.clickUrl) {
                    this.$set(citem, "clickUrl", "");
                  }
                  if (!citem.actionbarClickUrl) {
                    this.$set(citem, "actionbarClickUrl", "");
                  }
                  if (!citem.link) {
                    this.$set(citem, "link", "");
                  }
                  if (!citem.checkAll) {
                    this.$set(citem, "checkAll", false);
                  }
                  if (!citem.selected) {
                    this.$set(citem, "selected", false);
                  }
                  if (!citem.moudleName) {
                    this.$set(citem, "moudleName", "");
                  }
                  /* this.$set(item, "advGroupName", "");
              this.$set(item, "chooseApplication", "");
              this.$set(item, "isFirst", "");
              this.$set(item, "phoneType", []);
              this.$set(item, "clickUrl", ""); */
                  let accountId = items[1];
                  let params = {};
                  let url;
                  if (this.pageData.unionAdvert == 0) {
                    //投放范围默认
                    if (this.pageData.autoTarget == 1) {
                      //定向方式智能
                      params = {};
                      url = "/marketing/api/task/getAllTemplate";
                    } else {
                      params = {
                        accountId: accountId,
                      };
                      url = "/marketing/api/task/getKsTemplate";
                    }
                  } else {
                    params = {};
                    url = "/marketing/api/task/getAllTemplate";
                  }
                  this.$http({
                    method: "get",
                    url: url,
                    params: params,
                  }).then((res) => {
                    if (res.data.code === 1) {
                      /* this.moudleNameOptions = res.data.data; */
                      this.$set(citem, "moudleNameOptions", res.data.data);
                    } else {
                      this.$message.error(res.data.msg);
                    }
                  });
                  this.$http({
                    method: "get",
                    url: "/marketing/api/task/getProductList",
                    params: {
                      accountId: accountId,
                    },
                  }).then((res) => {
                    if (res.data.code === 1) {
                      this.$set(citem, "chooseAppeOptions", res.data.data);
                    } else {
                      this.$message.error(res.data.msg);
                    }
                  });
                  this.$http({
                    method: "get",
                    url: "/marketing/api/task_app/getListByAccountId",
                    params: {
                      accountId: accountId,
                    },
                  }).then((res) => {
                    if (res.data.code === 1) {
                      this.$set(citem, "chooseAppeOptions2", res.data.data);
                    } else {
                      this.$message.error(res.data.msg);
                    }
                  });
                  this.$http({
                    method: "get",
                    url: "/marketing/api/task/getCrowdList",
                    params: {
                      accountId: accountId,
                    },
                  }).then((res) => {
                    if (res.data.code === 1) {
                      this.$set(citem, "crowdOptions", res.data.data);
                    } else {
                      this.$message.error(res.data.msg);
                    }
                  });
                  ary.push(citem);
                }
              });
            }
          });
        });
      }
      this.pageData.groupNameList = ary;
      /* this.getCrowdList(); */
      this.handleChangeselectAccount();
      this.getIndustry(this.pageData.subAccount[0][1]);
      /* if (this.pageData.market == 2 && this.pageData.subAccount) {
        this.getProductList();
      } */
    },
    handleChangeselectAccount() {
      let list = this.pageData.groupNameList.map((item) => item.accountId);
      let slectAry = [];
      this.pageData.groupNameList.forEach((item) => {
        item.selected = false; //初始化
      });
      this.pageData.offerList.forEach((item) => {
        item.selectAccount.forEach((sitem) => {
          slectAry.push(sitem);
          this.pageData.groupNameList.forEach((gitem) => {
            if (gitem.accountId == sitem) {
              gitem.selected = true;
            }
          });
          if (slectAry.length >= list.length) {
            //上边子账户删除对应已选择项里删除
            if (list.length == 0) {
              item.selectAccount = [];
            } else {
              item.selectAccount = item.selectAccount.filter((a) =>
                list.some((b) => a == b)
              );
            }
          } else {
            item.selectAccount.forEach((sitem) => {
              this.pageData.groupNameList.forEach((gitem) => {
                if (gitem.accountId == sitem) {
                  gitem.selected = true;
                }
              });
            });
          }
        });
      });
    },
    // 获取应用
    getProductList() {
      this.$http({
        method: "get",
        url: "/marketing/api/task/getProductList",
        params: {
          accountId: this.pageData.subAccount,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.chooseAppeOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 获取人群
    getCrowdList() {
      this.$http({
        method: "get",
        url: "/marketing/api/task/getCrowdList",
        params: {
          accountId: this.pageData.subAccount,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.crowdOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 根据主账号获取子账号
    handleChangeMainAccount() {
      this.pageData.subAccount = null;
      /*  this.$http({
        method: "get",
        url: "/marketing/api/task/getByMasterAccount",
        params: {
          id: this.pageData.mainAccount,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.subAccountOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }); */
      this.$http({
        method: "get",
        url: "/marketing/api/task/getByProduct",
        params: {
          product: this.pageData.mainAccount,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          let ary = [];
          let data = res.data.data;
          data.forEach((item) => {
            let obj = {
              accountName: item.masterAccountName,
              accountId: item.masterAccountId,
              children: item.accounts,
              label: item.masterAccountName,
            };
            item.accounts.forEach((items) => {
              this.$set(
                items,
                "label",
                items.accountName + "(" + items.accountId + ")"
              );
            });
            ary.push(obj);
          });
          this.subAccountOptions = ary;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 根据模版获取模版数据
    handleChangeMoudleName() {
      /* this.$http({
        method: "get",
        url: "/marketing/api/task/getTemplateByName",
        params: {
          name: this.pageData.moudleName,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.pageData.moudleCont = res.data.data;
          // this.$set(this.pageData.moudleCont,data)
          // let data =
          //  = data
        } else {
          this.$message.error(res.data.msg);
        }
      }); */
    },
    // 获取主账号
    getMainAccount() {
      this.$http({
        method: "get",
        url: "/marketing/api/task/getAllMasterAccount",
      }).then((res) => {
        if (res.data.code === 1) {
          // this.mainAccountOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 获取投放产品
    getMainProduct() {
      this.$http({
        method: "get",
        url: "/marketing/api/task/getAllProduct",
      }).then((res) => {
        if (res.data.code === 1) {
          this.mainAccountOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 获取模版名称
    /*     getModuleData() {
      this.$http({
        method: "get",
        url: "/marketing/api/task/getAllTemplate",
      }).then((res) => {
        if (res.data.code === 1) {
          this.moudleNameOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    }, */
    // 根据视频选取封面
    handleClickChoosePic(index, item) {
      // 图片弹出框+回显
      let videoUrl = "",
        url = "",
        params = {};
      this.arrImgList = [];
      this.arrszImgList = [];
      this.imgList = [];
      this.dialogVisibleImg = true;
      console.log(item);
      if (index == 1) {
        this.videoIndex = item;
        //本地视频抽帧
        /*  videoUrl = this.pageData.videoSrc.url; */
        url = "/marketing/api/task/video_intercept";
        if (this.isAutoCz == 0) {
          if (this.pageData.videoFileList[item].covers[0].coverUrl != "") {
            this.imgList = this.pageData.videoFileList[item].covers;
            this.showConfirmBtn = true;
            for (let index = 0; index < this.imgList.length; index++) {
              this.$set(this.imgList[index], "userCheck", false);
              if (this.isAutoCz == 1) {
                this.$set(this.imgList[index], "showIcon", false);
              } else {
                this.$set(this.imgList[index], "showIcon", true);
              }
            }
            return;
          }
          //手动抽帧
          params = {
            /*  videoUrl: this.pageData.videoSrc.url, */
            videoUrl: this.pageData.videoFileList[item].videoUrl,
          };
          this.$http({
            method: "get",
            url: url,
            params: params,
          }).then((res) => {
            if (res.data.code === 1) {
              this.imgList = res.data.data;
              this.showConfirmBtn = true;
              for (let index = 0; index < this.imgList.length; index++) {
                this.$set(this.imgList[index], "userCheck", false);
                if (this.isAutoCz == 1) {
                  this.$set(this.imgList[index], "showIcon", false);
                } else {
                  this.$set(this.imgList[index], "showIcon", true);
                }
              }
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          /*  params = {
            videoUrl: this.pageData.videoFileList[item].url,
            accountNum: this.pageData.subAccount.length,
          }; */
          if(this.pageData.subAccount ==null){
            this.$message.error("请选择广告主ID");
            return
          }
          this.pageData.videoFileList.forEach((arr, arrIndex) => {
            this.$http({
              method: "get",
              url: url,
              params: {
                videoUrl: arr.videoUrl,
                accountNum: this.pageData.subAccount.length,
              },
            }).then((res) => {
              if (res.data.code === 1) {
                this.imgList = this.imgList.concat(...res.data.data);
                if (arrIndex == this.pageData.videoFileList.length - 1) {
                  this.showConfirmBtn = true;
                }
                arr.fileList = res.data.data;
                for (let index = 0; index < this.imgList.length; index++) {
                  this.$set(this.imgList[index], "userCheck", false);
                  if (this.isAutoCz == 1) {
                    this.$set(this.imgList[index], "showIcon", false);
                  } else {
                    this.$set(this.imgList[index], "showIcon", true);
                  }
                }
              } else {
                this.$message.error(res.data.msg);
              }
            });
          });
        }
      } else {
        /* videoUrl = this.pageData.szVideoSrc.url; */
        //素造视频抽帧
        this.szVideoIndex = item;
        url = "/marketing/api/task/video_intercept_adcreator";
        if (this.isAutoCz == 1) {
          this.pageData.szVideoFileList.forEach((arr, arrIndex) => {
            this.$http({
              method: "get",
              url: url,
              params: {
                videoId: arr.id,
                accountId: this.pageData.subAccount[0][1],
              },
            }).then((res) => {
              if (res.data.code === 1) {
                this.imgList = this.imgList.concat(...res.data.data);
                if (arrIndex == this.pageData.szVideoFileList.length - 1) {
                  this.showConfirmBtn = true;
                }
                arr.fileList = res.data.data;
                for (let index = 0; index < this.imgList.length; index++) {
                  this.$set(this.imgList[index], "userCheck", false);
                  if (this.isAutoCz == 1) {
                    this.$set(this.imgList[index], "showIcon", false);
                  } else {
                    this.$set(this.imgList[index], "showIcon", true);
                  }
                }
              } else {
                this.$message.error(res.data.msg);
              }
            });
          });
        }
      }
    },
    handleClickChoose(e, index) {
      e.userCheck = !e.userCheck;
      let chooseImg = this.imgList[index];
      if (e.userCheck) {
        this.arrImgList.push(chooseImg);
      } else {
        let arrUrl = [chooseImg].map((item) => item.url);
        const result = this.arrImgList.filter(
          (item) => !arrUrl.includes(item.url)
        );
        this.arrImgList = result;
      }
    },
    handleClickChooseSZ(e, index) {
      /* this.pageData.szVideoFileList = []; */
      e.userCheck = !e.userCheck;
      let chooseVideo = this.szVideoList[index];
      if (e.userCheck) {
        this.chooseSZvideoList.push(chooseVideo);
      } else {
        let arrVideo = [chooseVideo].map((item) => item.url);
        const result = this.chooseSZvideoList.filter(
          (item) => !arrVideo.includes(item.url)
        );
        this.chooseSZvideoList = result;
      }
      this.chooseSZvideoList.forEach((items) => {
        this.$set(items, "fileList", []);
      });
      /* this.szVideoList.forEach((items) => {
        if (item.id == items.id) {
          items.userCheck = true;
        } else {
          items.userCheck = false;
        }
      });
      this.pageData.szVideoSrc = item; */
    },
    handleChooseSure() {
      this.dialogVisibleImg = false;
      //let arrimgList = this.arrImgList.map((item) => item.url);
      /* this.fileArray = [];
      this.pageData.fileList.forEach((item) => {
        if(item.url){
            this.fileArray.push({ url: item.url });    
        }else{
            this.fileArray.push({url:item})
        }
      }); */
      if (this.pageData.matterType == 1) {
        if (this.isAutoCz == 0) {
          /* this.pageData.fileList = this.pageData.fileList.concat(
            this.arrImgList
          ); */
          this.pageData.videoFileList[
            this.videoIndex
          ].fileList = this.pageData.fileList.concat(this.arrImgList);
          //手动抽帧需要显示封面图
          this.pageData.videoFileList[this.videoIndex].fileArray = [
            ...this.pageData.videoFileList[this.videoIndex].fileList,
          ];
        } else {
          this.pageData.fileList = [];
          this.pageData.fileList = this.pageData.fileList.concat(this.imgList);
        }
        /* this.fileArray = [...this.pageData.fileList]; */
      } else {
        /*  if (this.isAutoCz == 0) {
          this.pageData.szfileList = this.pageData.szfileList.concat(
            this.arrImgList
          );
        } else {
          this.pageData.szfileList = [];
          this.pageData.szfileList = this.pageData.szfileList.concat(
            this.imgList
          );
        }
        this.szfileArray = [...this.pageData.szfileList];
        console.log(this.szfileArray); */

        if (this.isAutoCz == 0) {
          /* this.pageData.fileList = this.pageData.fileList.concat(
            this.arrImgList
          ); */
          this.pageData.szVideoFileList[
            this.szVideoIndex
          ].fileList = this.pageData.szfileList.concat(this.arrImgList);
          //手动抽帧需要显示封面图
          this.pageData.szVideoFileList[this.szVideoIndex].fileArray = [
            ...this.pageData.szVideoFileList[this.szVideoIndex].fileList,
          ];
        } else {
          this.pageData.szfileList = [];
          this.pageData.szfileList = this.pageData.szVideoFileList.concat(
            this.imgList
          );
        }
      }
    },
    handleChooseszCancel() {
      this.dialogVisibleszVideo = false;
      this.pageData.chooseAllSz = false;
    },
    handleChooseszSure() {
      if (this.chooseSZvideoList.length == 0) {
        this.$message.error("请选择视频");
        return;
      }
      this.pageData.szVideoFileList = this.chooseSZvideoList;
      this.dialogVisibleszVideo = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    // this.getDetail();
    //获取投放产品
    //this.getIndustry(); //获取创意分类
    this.getMainProduct();
    // 获取主账号
    this.getMainAccount();
    // 获取模版名称
    /* this.getModuleData(); */
    // // 获取选择应用
    // this.getProductList()
    // // 获取定向人群
    // this.getCrowdList()
    // // 获取排除人群
    // this.getCrowdOutList()
    /**
     * 获取主帐号
     * 1.根据主账号获取子账号
     * 2.获取模版名称传String
     * 3.根据模版名称获取模版内容
     * 4.根据子账户获取应用，定向人群,
     * 4-1 Html 渲染应用，定向人群    +++++++++++++
     * 5.按钮文案写死传String
     * 6.上传视频，图片之后赋值
     * 7.添加对应字段           +++++++++++++++++
     *
     * 上传视频，图片，出价校验问题
     *
     *
     *
     * 定向人群。排除人群，选择应用，
     * 年龄，投放时间，营销目标，选择应用，优先应用商店下载，自定义，投放链接，定向人群，排除人群
     */
  },
};
</script>
<style>
.hide .el-upload--picture-card {
  display: none;
}
.line {
  display: inline-block !important;
}
.text-info {
  width: 650px;
  padding: 5px;
}
.el-icon-caret-right {
  transition: none !important;
}
.el-select__input {
  vertical-align: baseline !important;
}
.el-select--medium {
  vertical-align: bottom !important;
}

.sz-video {
  display: inline-block;
}
.coumn {
  width: 400px;
}
.sz-video-content {
  width: 148px;
  text-align: center;
}
.sz-video-content .el-button {
  margin-top: 15px;
}
video {
  width: 148px;
  height: 148px;
}
.tip {
  position: absolute;
  top: -55px;
  left: 520px;
  font-size: 12px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  background-color: #fbfdff;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border-radius: 6px;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.b50 {
  width: 55% !important;
}
.chooseApp {
  word-break: break-all;
}
.putDate {
  position: absolute;
  top: 0px;
  left: 360px;
}
.dialogCont {
  overflow: hidden;
}
.dialogImgCont {
  float: left;
  margin-right: 7px;
  margin-left: 8px;
  position: relative;
  width: 148px;
  height: 148px;
  margin-top: 15px;
}
.chooseImg {
  position: absolute;
  left: 200px;
  top: 80px;
}
.chooseAccount {
  position: absolute;
  left: 200px;
  top: 40px;
}
.deleteVideo {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  margin-top: 5px;
}
.deleteSzVideo {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  margin-top: 5px;
}
.account {
  width: 80%;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  margin-top: 5px;
}
.imgList {
  width: 148px;
  height: 148px;
}
.imgList-icon {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 20px;
}
.imgList-icon img {
  width: 28px;
  height: 28px;
}
.video-content {
  position: relative;
}
.video-content .video-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.video-content .video-name {
  height: 65px;
  overflow: hidden;
  font-size: 10px;
}
</style>
